<template>
    <div id="chart">
        { message }
    </div>
    <!--容器大小-->
    <!--<div id="main" style="width: 1400px;height:650px;left: 10%;"></div>-->
</template>

<script>
    export default {
        data() {
            return {
                message:'Hello Vue!!',
                DataWD:[820, 932, 901, 934, 1290, 1330, 1320,110,1120,1900,1800,1700],
                DataSD:[400,600,300,200,1000,1100,1500,1600,1400,1000,1144,2000],
                DataLight:[400,600,300,200,1000,1100,1500,1600,1400,1000,1144,2000],
                testDate:[],
            }
        },
        mounted() {
            this.initDom(),
                console.log('kkkkkkk');
            this.axios({
                headers:{'Content-Type': 'application/json;charset=UTF-8'},
                method:"get",
                //url:'http://localhost:9095//SmartAG/view/Test'yyyy-mm-dd hh:mm:ss
                url:'http://localhost:9095/SmartAG/view/viewTest?date1=2021-10-11 16:00:00&date2=2021-10-17 15:00:00',
            }).then(res=>{
                console.log('kkkkkkk');
                console.log(res.data);
                this.testDate=res.data;
            })
        },
        create(){
            this.axios({
                headers:{'Content-Type': 'application/json;charset=UTF-8'},
                method:"post",
                url:'http://localhost:9095//SmartAG/view/Test'
                //url:'http://localhost:9095/SmartAG/view/viewTest?date1=2021-10-11 16:55:03&date2=2021-10-17 15:57:49',
            }).then(res=>{
                console.log('kkkkkkk');
                console.log(res.data);
                this.testDate=res.data;
            })
        },
        methods: {
            initDom() {
                //基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('chart'),'dark',);
                /* myChart.resize({
                   width: 800,
                   height: 400
                 });*/
                let newData = [];
                var app = {};
                for(let i=1;i<13;i++){
                    newData.push(i+':00')
                }

                //当前时间，初始时间
                const categories = (function () {
                    let now = new Date();
                    let res = [];
                    let len = 10;
                    while (len--) {
                        res.unshift(now.toLocaleTimeString().replace(/^\D*!/, ''));
                        now = new Date(+now - 60000);
                    }
                    return res;
                })();

                //初始数据序号，X轴的正上方（第x个数据）
                const categories2 = (function () {
                    let res = [];
                    let len = 10;
                    while (len--) {
                        res.push(10 - len - 1);
                    }
                    return res;
                })();

                //初始数据，每次随机生成数据（湿度）
                const dataSD = (function () {
                    let res = [];
                    let len = 10;
                    while (len--) {
                        res.push(Math.round(Math.random() * 1000));
                    }
                    return res;
                })();

                //初始数据，每次随机生成初始数据（温度）
                const dataWD = (function () {
                    let res = [];
                    let len = 0;
                    while (len < 10) {
                        res.push(+(Math.random() * 10 + 5).toFixed(1));
                        len++;
                    }
                    return res;
                })();

                //初始数据，每次随机生成初始数据（温度）
                /*const dataLight = (function () {
                    let res = [];
                    let len = 0;
                    while (len < 10) {
                        res.push(+(Math.random() * 10 + 5).toFixed(1));
                        len++;
                    }
                    return res;
                })();*/

                let dataLight;
                const axios = require('axios');
                axios.get('http://localhost:9095/SmartAG/view/viewTest', {
                    params: {
                        date1: '2021-10-11 16:00:00',
                        date2: '2021-10-17 15:00:00',
                    }
                }).then(result=>
                    {
                        console.log("获取最新的数据ZhuZhuang")
                        console.log(result.data)
                        console.log("获取最新的数据ZhuZhuang")
                        // for (let i = 0; i <= result.data.length; i++) {
                        for (let i = 0; i <= 10; i++) {
                            /*  let id = result.data[i].id;
                              let wd = result.data[i].temperatureData;*/
                            let gq = result.data[i].lightData;
                            /*   let sd = result.data[i].humidityData;
                               let data = result.data[i].date;*/
                            //初始数据，每次随机生成初始数据（温度）
                            dataLight = (function () {
                                let res = [];
                                /* let len = 0;*/
                                // while (len < 10) {
                                res.push(gq);
                                // len++;
                                console.log(res)
                                //}
                                return res;
                            })();
                        }
                    }
                );

                let option = {
                    /*标题*/
                    title: {
                        top:'5%',
                        right: 'center',
                        text: '温度/湿度变化图',
                        textStyle:{
                            color: '#00CBA7'
                        }
                    },

                    //图表大小、
                    grid:{
                        top:'20%',
                        left:100,
                        right:'15%',
                        button:'10%',
                    },

                    //提示框
                    tooltip: {
                        trigger: 'axis',
                        //坐标轴指示器配置项
                        axisPointer:{
                            lineStyle: {
                                color: '00FF00'
                            }
                        }
                    },
                    //图例组件
                    legend:{
                        top:20,
                        icon: 'rect',
                        itemHeight:5,
                        itemWidth:14,
                        itemGap: 13,
                        data: ['温度','湿度'],
                        right: '4%',
                        textStyle: {
                            fontSize: 12,
                            color: '#F1F1F3'
                        }
                    },
                    //缩放区域
                    dataZoom: {
                        show: false,
                        start: 0,
                        end: 100
                    },
                    xAxis: [
                        {
                            type: 'category',
                            axisTick: {
                                alignWithLabel: true
                            },
                            data: categories
                        },
                        {
                            type: 'category',
                            axisTick: {
                                alignWithLabel: true
                            },
                            data: categories2
                        }
                    ],
                    /* xAxis: [
                       {
                         type: 'category',
                         boundaryGap: true,
                         data: categories
                       },
                       {
                         type: 'category',
                         boundaryGap: true,
                         data: categories2
                       }
                     ],*/
                    yAxis: [
                        {
                            type: 'value',
                            scale: true,
                            name: '温度（/℃）',
                            max: 30,
                            min: 0,
                            boundaryGap: [0.2, 0.2]
                        },
                        {
                            type: 'value',
                            scale: true,
                            name: '湿度/（g/m3）',
                            max: 1200,
                            min: 0,
                            boundaryGap: [0.2, 0.2]
                        },
                    ],

                    series: [{
                        name: '温度',
                        data: dataWD,
                        type: 'bar',
                        barWidth:10,
                        /*  //设置点的样式
                          itemStyle:{
                              /!*color:'#FF0000',

                              size:100,*!/
                              borderColor: 'black',
                              borderWidth: 0.5
                          },*/
                        /*//线条样式
                        lineStyle:{
                            width: 1,
                            opacity: 0.4
                        },
*/
                        /*areaStyle:{
                          color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                              offset: 0, color: '#00FFDE' // 0% 处的颜色
                            }, {
                              offset: 1, color: '#FBFAFC' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                          }
                        }*/
                    },
                        {
                            name: '湿度',
                            type: 'bar',
                            barWidth:10,
                            /*xAxisIndex:1,*/
                            yAxisIndex:1,//使用y轴右边的值
                            data:dataSD,
                            /* makePoint:{
                                 symbolSize: 20
                             },
                             //线条样式
                             lineStyle:{
                                 width: 1,
                                 opacity: 0.4
                             },*/
                        },{
                            name: '光强',
                            type: 'bar',
                            barWidth:10,
                            /*xAxisIndex:1,*/
                            /*yAxisIndex:1,//使用y轴右边的值*/
                            data:dataLight,
                            /* makePoint:{
                                 symbolSize: 20
                             },
                             //线条样式
                             lineStyle:{
                                 width: 1,
                                 opacity: 0.4
                             },*/
                        },
                    ]
                };

                // 绘制图表
                myChart.setOption(option);

                app.count = 11;
                setInterval(function () {
                    let axisData = new Date().toLocaleTimeString().replace(/^\D*/, '');
                    //窗口平移
                    dataSD.shift();
                    dataSD.push(Math.round(Math.random() * 1000));
                    dataWD.shift();
                    dataWD.push(+(Math.random() * 10 + 5).toFixed(1));
                    dataLight.push(dataLight);
                    categories.shift();
                    categories.push(axisData);
                    categories2.shift();
                    categories2.push(app.count++);
                    myChart.setOption({
                        xAxis: [
                            {
                                data: categories
                            },
                            {
                                data: categories2
                            }
                        ],
                        series: [
                            {
                                data: dataWD
                            },
                            {
                                data: dataSD
                            },
                            {
                                data: dataLight
                            },
                        ]
                    });
                },60000);

            },
            /*updateData(newData){
              this.deviceRec = newData
              this.initDom()
            }*/

        },
    }
</script>

<style scoped>
    #chart{
        width: 800px;
        height: 600px;
    }
</style>

